<template>
    <div class="categoryInNotice" v-if="category!=null">
        <el-form label-position="top" label-width="80px" >
          <el-form-item label="分类名" >
            <el-input style="width: 200px;" placeholder="分类名请控制在4个字以内" v-model="category.name"></el-input>
          </el-form-item>
        </el-form>

        <div style="margin-bottom: 15px;">请选择分类图片</div>
        <el-upload
          class="avatar-uploader"
          action="https://xiangtanmarujizhawangluokejiyouxiangongsi.xyz/gzh/img/upload"
          :show-file-list="false"
					name="imgs"
          :on-success="handleAvatarSuccess">
          <img v-if="category.img" :src="category.img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div style="margin-top: 15px;"></div>
        <el-button type="primary" @click="updateCategory">立即修改</el-button>
    </div>
</template>
<script>
// @ 是 /src 的别名

export default {
    name: 'categoryInNotice',
    props: {

    },
    data() {
        return {
            imageUrl: '',
						category:null
        }
    },
		created:function(){
			this.axios.get('/client/category/categoryById?categoryId='+this.$route.params.id)
			.then((res)=>{
				console.log(res.data)
				this.category = res.data
			})
		},
    methods: {
        handleAvatarSuccess(res, file) {
            this.category.img = res
						console.log(res)
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

//             if (!isJPG) {
//                 this.$message.error('上传头像图片只能是 JPG 格式!');
//             }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            // return isJPG && isLt2M;
						return isLt2M;
        },
				updateCategory() {
					this.axios.get('/admin/updateCategory?categoryId='+this.category.categoryId+"&name="+this.category.name+'&img='+this.category.img)
					.then(()=>{
						this.$notify({
							title: '操作成功',
							message: '修改分类信息成功',
							type: 'success'
						});
					})
				}
    }
}
</script>
<style  lang="styl" scoped>
.categoryInNotice >>> .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.categoryInNotice >>> .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.categoryInNotice >>> .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.categoryInNotice >>> .avatar {
    width: 80px;
    height: 80px;
    display: block;
}

</style>